<template>
	<div :class="curClassName" :style="showContent && curStyle">
		<template v-if="isShowCaption">
			<a-card :bordered="false" class="app-standard-container__card">
				<template v-if="isShowCaption && caption" #title>
					<p>
						<template v-if="titleBarCloseMode !== 0">
							<DownCircleOutlined
								v-if="showContent"
								@click="handleContentShowStatusChange"
							/>
							<RightCircleOutlined
								v-else
								@click="handleContentShowStatusChange"
							/>
						</template>
						{{ caption }}
					</p>
				</template>
				<div :class="curBodyClassName" :style="curStyle" v-show="showContent">
					<template v-if="mutliData && mutliData.length > 0">
						<template v-for="(data, index) of mutliData">
							<template v-if="containerModel.length > 0">
								<div
									v-for="name of containerModel"
									:key="name"
									class="container-item__pos"
									:style="getItemPosStyle(name)"
								>
									<div class="container-item__pos__title" v-if="isShowCaption">
										{{ caption }}
									</div>
									<slot :name="name" :data="{ index }"></slot>
								</div>
							</template>
						</template>
					</template>
					<template v-else>
						<template v-if="containerModel.length > 0">
							<div
								v-for="name of containerModel"
								:key="name"
								class="container-item__pos"
								:style="getItemPosStyle(name)"
							>
								<slot :name="name"></slot>
							</div>
						</template>
					</template>
				</div>
			</a-card>
		</template>
		<template v-else>
			<template v-if="mutliData && mutliData.length > 0">
				<template v-for="(data, index) of mutliData">
					<template v-if="containerModel.length > 0">
						<div
							v-for="name of containerModel"
							class="container-item__pos"
							:style="getItemPosStyle(name)"
						>
							<slot :name="name" :data="{ index }"></slot>
						</div>
					</template>
				</template>
			</template>
			<template v-else>
				<template v-if="containerModel.length > 0">
					<div
						v-for="name of containerModel"
						class="container-item__pos"
						:style="getItemPosStyle(name)"
					>
						<slot :name="name"></slot>
					</div>
				</template>
			</template>
		</template>
	</div>
</template>

<script setup lang="ts">
import { computed, ref, Ref, watch } from 'vue';
import { StandardContainerProps } from './standard-container';
import { DownCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';

const props = defineProps(StandardContainerProps);

/**
 * 插槽对象
 *
 * @memberof AppStandardContainer
 */
const containerModel = computed(() => {
	let containerModel: any[] = [];
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	if (
		curLayoutModel &&
		curLayoutModel.details &&
		curLayoutModel.details.length > 0
	) {
		curLayoutModel.details.forEach((key: string) => {
			containerModel.push(key);
		});
	}
	return containerModel;
});

/**
 * 项名称
 *
 * @memberof AppStandardContainer
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 多数据容器值
 *
 * @memberof AppStandardContainer
 */
const mutliData = computed(() => {
	if (props.isMultiContainer && props.isMultiContainer === true) {
		if (props.layoutModelDetails[itemName.value]) {
			return props.layoutModelDetails[itemName.value].getData();
		}
	}
});

/**
 * 当前容器样式类
 *
 * @memberof AppStandardContainer
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-standard-container': true,
	};
	if (layoutModel) {
		// 显示标题内部对齐样式需加载card body上
		if (!isShowCaption.value) {
			Object.assign(classNames, layoutModel.getClassNames());
		}
	}
	return classNames;
});

/**
 * 当前容器内容样式类
 *
 * @memberof AppStandardContainer
 */
const curBodyClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-standard-container__body': true,
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 当前容器样式
 *
 * @memberof AppStandardContainer
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 *  获取项布局样式
 */
const getItemPosStyle = (name: string) => {
	let layoutModel: any;
	if (props.index || props.index === 0) {
		layoutModel = props.layoutModelDetails[`${name}_${props.index}`];
	} else {
		layoutModel = props.layoutModelDetails[name];
	}
	if (layoutModel) {
		return layoutModel.getBoxLayOutStyle();
	}
};

/**
 * 标题
 *
 * @memberof AppStandardContainer
 */
const caption = computed(() => {
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	return curLayoutModel.caption;
});
/**
 * 是否显示标题
 *
 * @memberof AppStandardContainer
 */
const isShowCaption = computed(() => {
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	return curLayoutModel?.isShowCaption;
});

/**
 * 标题栏关闭模式
 *
 * @memberof AppStandardContainer
 */
const titleBarCloseMode = computed(() => {
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	return curLayoutModel?.titleBarCloseMode;
});

//  处理内容显示状态变化
const handleContentShowStatusChange = (event: MouseEvent) => {
	event.stopPropagation();
	showContent.value = !showContent.value;
};

//  显示内容区
const showContent: Ref<boolean> = ref(
	titleBarCloseMode.value === 2 ? false : true
);
</script>
